import React, { Component } from 'react';
import { is } from 'immutable'
import { Tabs, Row, Col, Button } from 'antd';
import OperatorComponent from './tab_operator';
import CommandComponent from './tab_command';
import ResultComponent from './tab_result';
import {connect} from 'react-redux';
import { PanDescConstant } from '../constants/constant_en'
import { clear, ActionConstant} from '../actions/search_action'

const TabPane = Tabs.TabPane;

const TabPane_style = {
}


class PanComponent extends Component{

    constructor() {
        super();
        this.key = 0;
    }

    componentDidMount() {

    }

    shouldComponentUpdate(nextProps, nextState){
        return !(this.props === nextProps || is(this.props, nextProps)) ||
            !(this.state === nextState || is(this.state, nextState));
    }

    onChange(key) {
        this.key = parseInt(key);
    }

    handleClear(key, dispatch) {
        switch (key) {
            case 0:
                dispatch(clear(ActionConstant.type_clear_operator))
                break;
            case 1:
                dispatch(clear(ActionConstant.type_clear_command))
                break;
            case 2:
                dispatch(clear(ActionConstant.type_clear_result))
                break;
            default:
                break;
        }
    }

    render() {
        const { search_operator, search_command, result_refine, dispatch} = this.props;

        const extra_operator = (
            <Button size='small' onClick={()=>this.handleClear(this.key, dispatch)} >{PanDescConstant.clear}</Button>
        )

        return (
            <Row>
                <Col span={12} offset={6}>
                    <Tabs
                        onChange={(key)=>this.onChange(key)}
                        defaultActiveKey="0"
                        type="card"
                        tabBarExtraContent={extra_operator}>

                        <TabPane
                            style={TabPane_style}
                            tab={search_operator.get("tab_name")}
                            key="0">

                            <OperatorComponent
                                data={search_operator}
                                dispatch={dispatch}>

                            </OperatorComponent>

                        </TabPane>

                        <TabPane
                            style={TabPane_style}
                            tab={search_command.get("tab_name")}
                            key="1">

                            <CommandComponent
                                data={search_command}
                                dispatch={dispatch}>

                            </CommandComponent>

                        </TabPane>

                        <TabPane
                            style={TabPane_style}
                            tab={result_refine.get("tab_name")}
                            key="2">

                            <ResultComponent
                                data={result_refine}
                                dispatch={dispatch}>

                            </ResultComponent>

                        </TabPane>
                    </Tabs>
                </Col>
            </Row>

        )



    }

}


const mapStateToProps = (state) => {
    return {
        search_operator: state.search_operator,
        search_command: state.search_command,
        result_refine: state.result_refine,
    }
};

const PanContianer = connect(
    mapStateToProps,
    null,
)(PanComponent);

export default PanContianer;
